<template>
	<view class="box">
		<view slot="top">
			<u-navbar height="50" title="超值拼团" title-color="#333" title-size="36">
			</u-navbar>
		</view>
		<view class="itemBox">
			<view class="item" @click="goPt(item.groupbuy_id)" v-for="item in list" :key="item.goods_id">
				<view class="left">
					<image :src="item.groupbuy_image[0]" mode="widthFix" style="width: 220rpx; height: 220rpx;"></image>
				</view>
				<div class="right">
					<view class="name">
						{{item.goods_name}}
					</view>
					<view class="num">
						{{item.buy_min_number}}人成团
					</view>
					<view class="cz">
						<view class="desc">
							<view class="newPrice">
								<span class="icon">拼团价￥</span>
								<span>{{item.groupbuy_price}}</span>
							</view>
							<view class="oldPrie">
								<span class="icon">￥{{item.groupbuy_rebate}}</span>
							</view>
						</view>
						<view class="btn" >
							立即开团
						</view>
					</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGroupbuylist
	} from '@/api/product.js'
	export default {
		data() {
			return {
				list:[]
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData() {
				getGroupbuylist().then((res) => {
					console.log("拼团列表", res);
					this.list = res.list
				})
			},
			goPt(id) {
				uni.navigateTo({
					url: '/page/PtGoodsInfp/PtGoodsInfp?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 1rpx;
	}

	.itemBox {
		width: 750rpx;
		padding: 30rpx 10rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
		background-color: #ffffff;

		.item {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #c1c0c9;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			&:nth-last-child(1){
				border: none;
			}

			.left {
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
			}

			.right {
				width: 440rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				height: 220rpx;
				box-sizing: border-box;

				.right .name {
					font-size: 30rpx;

					color: #333333;
				}

				.right .num {
					font-size: 26rpx;

					color: #666666;
					line-height: 48rpx;
				}

				.cz {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;
				}

				.cz .desc {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FA453C;
					line-height: 48rpx;
				}

				.cz .desc .newPrice .icon {
					font-size: 24rpx;
				}

				.cz .desc .oldPrie {

					font-size: 28rpx;

					text-decoration: line-through;
					color: #999999;
					line-height: 48rpx;
				}

				.cz .btn {
					text-align: center;
					color: #fff;
					width: 150rpx;
					height: 56rpx;
					background: #fc562f;
					border-radius: 28rpx;
					line-height: 56rpx;
				}

			}
		}
	}
</style>